/*数据核心全局变量*/
let dataS=data["beautyData"];
// console.log(data)
/*头部*/
(function () {
    var x = Object.getOwnPropertyNames(shouyenav);

    x.forEach(function (w, i, arr) {
        shouyenav[w].top.forEach(function (v) {
            $('.s-headline').eq(i).append('<div><a href="">' + v + '</a></div>')
        });
        for (var key in shouyenav[w].main) {

            var li = '';
            shouyenav[w].main[key].forEach(function (va) {
                li += '<li class="aa"></li><li><a href="#">' + va + '</a>';
            })

            $('.s-l-show-div').eq(i).append('<div class="s-div"><h3>' + key + '</h3><ul>' + li +
                '</ul></div>');

        }
        shouyenav[w].img.forEach(function (value) {
            $('.s-l-show-div2').eq(i).append('<img src="../img/z-syimg/ejdh/' + value +
                '" alt="">')
        })

    })
    $('.nav-1').mouseover(function () {
        $('.s-left').css('display', 'block')
    })
    $('.s-left').mouseover(function () {
        $('.s-left').css('display', 'block')
    })
    $('.nav-1').mouseout(function () {
        $('.s-left').css('display', 'none')
    })
    $('.s-left').mouseout(function () {
        $('.s-left').css('display', 'none')
    })
})();
/*品牌*/
(function () {
    /*多选按钮*/
    let options = $("#h_options");
    /*品牌*/
    let content = $(".hg_content");
    /*品牌的盒子*/
    let hg_div = $(".hg_div");
    /*字母查询*/
    let ziMu = $(".hg_ziMuSort");
    /*确认,取消*/
    let yes = $(".hg_yes_no");
    /*品牌显示*/
    let hgzBox = $(".hgz_box");
    /*abc标签*/
    let li = $(".hgz_li")
    /*展示高度*/
    let icon = $(".icon");
    /*隐藏 true:添加高度*/
    let flag = true;
    options.click(function () {
        content.toggle();
        ziMu.toggle();
        yes.toggle();
        // if (!icon.attr("data-i")){
        addHeight();
        // }
    });
    /*取消关闭按钮*/
    yes.click(function () {
        /*隐藏*/
        content.css("display", "flex");
        ziMu.css("display", "none");
        yes.css("display", "none");
        hg_div.removeClass("hg_divStyle");
        /*下次添加高度，确保点击事件可用*/
        flag = true;
    });
    /**/
    icon.click(function () {
        addHeight();
    });
    /*悬浮li展示*/
    li.mouseenter(function () {
        $(this).children(".hgz_box").css("display", "block").end().siblings().children(".hgz_box").css("display", "none");
    })
    /*选项上显示*/
    // hgzBox.hover(function () {
    // }, function (e) {
    //     // hgzBox.css("display","none");
    // })

    /*展示高度*/
    function addHeight() {
        if (flag) {
            /*添加高度*/
            hg_div.addClass("hg_divStyle")
            flag = false;
        } else {
            hg_div.removeClass("hg_divStyle")
            flag = true;
        }
    }

})();
/*商品渲染 */
(function () {
    /*获取ul*/
    let hlw_ul = $(".hlw_ul");
    // let li = "";
    vvv(dataS,hlw_ul);
})();
/*渲染左边*/
(function () {

    promoteProducts()

    function promoteProducts() {
        let hbUl = $(".hb_ul");
        let hbLi = '';
        let sp;
        for (let i = 0; i < 7; i++) {
            let index = Math.floor(Math.random() * 20 + 1);
            sp = dataS[index];
            hbLi += ` <li class="hb_li">
                                <div class="hlw_box2 text-center">
                                    <!--图片-->
                                    <div class="hlw_boxImg mb-10">
                                           <a href="../html/goods.html?shopName=beautyData#${sp.goodsid}">
                                                   <img src="${sp.goodsurls.nowurl}" alt="" class="w100">
                                               </a>
                                    </div>
                                    <!--价格-->
                                    <div class="hlw_num df justify-sb mb-10 mt-10">
                                        <p> ￥<span class="hlw_price">${sp.goodsprice}</span></p>
                                        <p>已售 <span class="hlw_num">${sp.sales}</span>件</p>
                                    </div>
                                    <!--描述-->
                                    <div class="hlw_depict mb-10">
                                        <a href="../html/goods.html?shopName=beautyData#${sp.goodsid}" class="fc-0000" title="${sp.goodstitle}">
                                           ${sp.goodstitle}
                                        </a>
                                    </div>
                                </div>
                            </li>`

        }
        hbUl.empty();
        hbUl.append(hbLi);
    }

    /*按钮*/
    let hspI = $(".hsp_i");
    let hspS = $(".hsp_spread");
    let hbsp = $(".hb_sp")
    let flag = true;
    let hspWidth = 0;
    let hspList = $(".hsp_list");
    hspI.click(function () {
        if (flag) {
            hspWidth = 0;
            $(this).parent().removeClass("top30");
            hspList.addClass("hsp_list fl w101")
            flag = false;
        } else {
            hspWidth = 221;
            $(this).parent().addClass("hsp_btn mb-10 pos-a top30")
            hspList.removeClass("w101")
            flag = true;
        }
        hspS.width(hspWidth);
        $(this).parent(".hsp_btn").next().slideToggle(500)
        // $().css("display", "none")
        // flag = false;
    })

})();
/*用于更改ul的添加位置、调用的渲染的数据*/
let ULFLAT=true;

/*大图、小图切换*/
(function () {
    /*切换的盒子*/
    let da = $(".hsp_list_big");
    let xiao = $(".hsp_list_thu");
    /*按钮*/
    let big = $("#hbf_big")
    let thum = $("#hbf_thum")

    /*添加的位置*/
    let hltUl = $(".hlt_ul");
    big.click(function () {
        big.children().css("color", "red");
        thum.children().css("color", "#666666");
        xiao.css("display", "none")
        da.css("display", "block")
        ULFLAT=true;
        vvv(dataS,$(".hlw_ul"))
        move()
    })
    thum.click(function () {
        thum.children().css("color", "red");
        big.children().css("color", "#666666");
        xiao.css("display", "block")
        da.css("display", "none")
        ULFLAT=false;
        thumbnail(dataS,hltUl)
        ddd()
        move()
    })

  
    
})();


//你喜欢的
(function () {
    // 猜你喜欢数据
    let xihuan = $('#xihuan');
    let str1 = "";
    for (let i = 0; i < 7; i++) {
        str1 += `
        <li>
<!--             <a href="javascript:void(0)" style="display: block;"></a>-->
             <div class="p-img">
<!--                 <a href="javascript:void(0)" style="display: block;">-->
<!--                     <div class="modalimg"></div>-->
<!--                 </a>-->
                 <a href="../html/goods.html?shopName=beautyData#${dataS[i].goodsid}">
                     <img src="${dataS[i].goodsurls.nowurl}" width="190" alt="">
                 </a>
             </div>
             <div class="p-price">￥${dataS[i].goodsprice}</div>
             <div class="p-name">
                 <a href="">${dataS[i].goodstitle}</a>
             </div>
             <div class="p-num">
                 已售<em>${dataS[i].sales}</em>件
             </div>

        </li>
        `;
    }
    xihuan.append(str1);
})();

/*渲染数据*/
function vvv(data1,obj) {
    /*获取ul*/
    // let hlw_ul = obj;
    let li = "";
    data1.map(function (v, i) {
        li += `<li class="hlw_li " >
                                       <div class="hlw_box text-center">
                                           <!--图片-->
                                           <div class="hlw_boxImg mb-10">
                                               <a href="../html/goods.html?shopName=beautyData#${v.goodsid}">
                                                   <img src="${v.goodsurls.nowurl}" alt="" class="w100">
                                               </a>
                                           </div>
                                           <!--切换-->
                                           <div class="hlw_toggle mt-10 mb-10">
                                               <ul class="df">`;
        v.goodsurls.picsurl.forEach(function (v1, i1) {
            li += `<li class="hlw_toggle_img mr-5">
                                          <a href="javascript:void(0)">
                                           <img src="${v1}" alt="" class="w100">
                                          </a>
                                    </li>`
        });
        li += `
                                                  
                                               </ul>
                                           </div>
                                           <!--价格-->
                                           <div class="hlw_num df justify-sb mb-10">
                                              <p> ￥<span class="hlw_price">${v.goodszprice}</span></p>
                                               <p>已售 <span class="hlw_num">${v.sales}</span>件</p>
                                           </div>
                                           <!--描述-->
                                           <div class="hlw_depict mb-10">
                                               <a href="../html/goods.html?shopName=beautyData#${v.goodsid}" class="fc-0000" title="${v.goodstitle}">
                                                  ${v.goodstitle}
                                               </a>
                                           </div>
                                           <div class="hlw_smallShop df mb-10">
                                               <i class="hs_shop">${v.shopname}</i>
                                               <span class="iconfont">&#xe608;</span>
                                           </div>
                                           <div class="hlw_gn ">
                                               <div class="">
                                                   <div class="hlw_line df">
                                                       <a href="javascript:void(0)" style="color: black" class="hlw_contrast"><span class="hgz_choose mr-5 sp-contrast" data-choose="${v.goodsid}"></span>对比</a>
                                                       <a href="javascript:void(0)" style="color: black">
                                                           <span class="iconfont">&#xe627;</span>收藏
                                                       </a>
                                                       <a href="javascript:void(0)" style="color: red" class="hlw_join" data-c="${v.goodsid}"><span class=" iconfont fc-red">&#xe63f;</span>加入购物车</a>
                                                   </div>
                                               </div>
                                           </div>
                                       </div>
                                    </li>`

    });
    /*添加之前先清空*/
    obj.empty();
    /**/
    obj.append(li);

}
function thumbnail(newData1,obj) {
    let li = "";
    newData1.map(function (v, i) {
        li += `   <li class="hlt_li">
                                    <div class="hl_box df">
                                        <div class="hl_w40 df">
                                            <!--图片-->
                                            <div class="hlb_img ">
                                                 <a href="../html/goods.html?shopName=beautyData#${v.goodsid}">
                                                   <img src="${v.goodsurls.nowurl}" alt="" class="w100">
                                               </a>
                                            </div>
                                            <!--详情-->
                                            <div class="hl_depict ml-10 ">
                                                <div><a href="../html/goods.html?shopName=beautyData#${v.goodsid}" class="fc-0000">${v.goodstitle}</a></div>
                                                <p class="fc-6666 mt-10">
                                                   销量: <span class="hld_sales mr-40">${v.sales}</span>
                                                   评论: <span class="hld_comment">100</span>
                                                </p>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                        <!--店铺-->
                                        <div class="hl_store df align-ic">
                                            <i class="hs_shop">${v.shopname}</i>
                                            <span class="iconfont">&#xe608;</span>
                                        </div>
                                        <!--价格-->
                                        <div class="hl_price fc-red">
                                            ￥<span class="hlp fz14">${v.goodszprice}</span>
                                            <s class="hlp_originalPrice fz14">${v.goodsprice}</s>
                                        </div>
                                        <div class="hlw_gn hl_gn df">
                                            <div class="">
                                                <div class="hlw_line df hl_a">
                                                    <a href="javascript:void(0)" style="color: black" class="hlw_contrast"><span class="hgz_choose mr-5 sp-contrast" data-choose="${v.goodsid}"></span>对比</a>
                                                    <a href="javascript:void(0)" style="color: black">
                                                        <span class="iconfont">&#xe627;</span>收藏
                                                    </a>
                                                    <a href="javascript:void(0)" style="color: red" class="hlw_join" data-c="${v.goodsid}"><span class=" iconfont fc-red">&#xe63f;</span>加入购物车</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>`
    })
    obj.empty();
    obj.append(li);
}